<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册 - 乐购</title>
    <link rel="icon" href="images/common/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles/reset.css" type="text/css">
    <link rel="stylesheet" href="styles/common.css" type="text/css">
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
    <link rel="stylesheet" href="styles/login.css" type="text/css">
</head>
<body>
<!-- 页头 -->
<header class="logHead">
    <div class="container">
        <!-- logo -->
        <a href="index.html">
            <img src="images/index/logo.png" alt="logo">
        </a>
        <!-- 咨询电话 -->
        <div class="contact right fz16">
            <img src="images/index/contact.jpg" alt="电话">
            <p>咨询电话<br/>0828 - 1010110</p>
        </div>
    </div>
</header>
<!-- 主体 -->
<div class="main clearfix">
    <div class="mainCont">
        <div class="regBtn">
            <span class="btm"><i class="iBg">1</i>注册协议</span>
            <span><i>2</i>填写账号信息</span>
            <span><i>√</i>注册成功</span>
        </div>
        <!-- 注册页面 -->
        <div class="regMsg regMsg-one fz14 lh35">
            <h1>注册协议</h1>
            <p>
                <strong>【审慎阅读】</strong>
                您在申请注册流程中点击同意前，应当认真阅读以下协议。
                <span>请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：</span>
                <br/><span>1、与您约定免除或限制责任的条款；</span>
                <br/><span>2、与您约定法律适用和管辖的条款；</span>
                <br/><span>3、其他以粗体下划线标识的重要条款。</span>
                <br/>如您对协议有任何疑问，可向平台客服咨询。
                <br/><strong>【特别提示】</strong>
                当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。
                <br/><span>阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序"</span>
            </p>
            <span>
                <b id="news">平台服务协议</b>
                <b>隐私权政策</b>
                <b>法律声明</b>
                <b>支付宝及客户端服务协议</b>
            </span>
            <label id="agree">
                <input type="checkbox" id="sure">
                阅读并接受以上相关<span>平台协议</span>及<span>政策声明</span>
            </label>
            <button type="button" id="register">同意注册</button>
        </div>
        <!-- 填写信息 -->
        <div class="regMsg regMsg-two">
            <form action="submit.php" method="post" id="forms">
                <label>
                    <span>真实姓名：</span>
                    <input type="text" placeholder="请输入你的真实姓名" autofocus id="realName" name="realName">
                </label>
                <label>
                    <span>用户名：</span>
                    <input type="text" placeholder="请输入你的账号用户名" id="userName" name="userName">
                </label>
                <label>
                    <span>密码：</span>
                    <input type="password" placeholder="请输入密码" name="firPwd" id="firPwd">
                </label>
                <label>
                    <span>确认密码：</span>
                    <input type="password" placeholder="请再次确认密码" id="surePwd">
                </label>
                <label>
                    <span>密码强度：</span>
                    <b><i></i></b>
                </label>
                <label>
                    <span>邮箱：</span>
                    <input type="email" list="emails" placeholder="请输入你的邮箱" id="email">
                    <datalist id="emails">
                        <option></option>
                        <option></option>
                        <option></option>
                        <option></option>
                        <option></option>
                    </datalist>
                </label>
                <label>
                    <span>手机号码：</span>
                    <input type="tel" placeholder="请输入你的手机号码" id="phoneNum">
                </label>
                <label>
                    <span>验证码：</span>
                    <input type="text" placeholder="请输入验证码" id="verCode">
                    <button id="getCode" type="button">获取验证码</button>
                </label>
                <label>
                    <input type="submit" value="提交注册" id="regSub" name="regSub">
                </label>
            </form>
        </div>
        <!-- 注册成功 -->
        <div class="regMsg regMsg-three">
            <i class="layui-icon layui-icon-auz"></i>
            <span>注册成功，请前往<a href="login.html">登录</a></span>
        </div>
    </div>
</div>
<!-- 页脚 -->
<footer>
    <!-- 站点地图 -->
    <div class="container">
        <ul class="siteSer fz18 lh24">
            <li>
                <img src="images/index/site_01.jpg" alt="">
                <strong>正品保障<br/><span>正品行货 放心选购</span></strong>
            </li>
            <li>
                <img src="images/index/site_02.jpg" alt="">
                <strong>满86包邮<br/><span>满86元 免运费</span></strong>
            </li>
            <li>
                <img src="images/index/site_03.jpg" alt="">
                <strong>售后无忧<br/><span>7天无理由退货</span></strong>
            </li>
            <li>
                <img src="images/index/site_04.jpg" alt="">
                <strong>准时送达<br/><span>收货时间由你做主</span></strong>
            </li>
        </ul>
        <ul class="siteMap clearfix">
            <li>
                <a href="">新手入门</a>
                <a href="">购物流程</a>
                <a href="">会员制度</a>
                <a href="">订单查询</a>
                <a href="">服务协议及隐私说明</a>
                <a href="">网站地图</a>
            </li>
            <li>
                <a href="">支付方式</a>
                <a href="">货到付款</a>
                <a href="">网上支付</a>
                <a href="">礼品卡支付</a>
                <a href="">其它支付</a>
            </li>
            <li>
                <a href="">配送服务</a>
                <a href="">配送进度查询</a>
                <a href="">商品验货与签收</a>
            </li>
            <li>
                <a href="">相关规则</a>
                <a href="">平台规则</a>
                <a href="">退换货政策</a>
                <a href="">发票制度</a>
                <a href="">帮助中心</a>
            </li>
            <li>
                <span>App更优惠</span>
                <img src="images/index/qrCode_01.jpg" alt="">
            </li>
            <li>
                <span>加微信查订单</span>
                <img src="images/index/qrCode_02.jpg" alt="">
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="record fz12 lh26">
        <p>沪ICP备XXXXXXXXX号&nbsp; | &nbsp;经营证照&nbsp; | &nbsp;互联网药品信息服务资格证(沪)-经营性-2017-0006&nbsp; | &nbsp;违法和不良信息举报电话：XXX-XXXXXXXX&nbsp; | &nbsp;沪B2-XXXXXXX
            <br/>沪公网安备 XXXXXXXXX号&nbsp; | &nbsp;友情链接&nbsp; | &nbsp;出版物经营许可证&nbsp; | &nbsp;增值电信业务经营许可证</p>
        <div class="depart">
            <a href="#"><img src="images/index/depart_01.jpg" alt=""></a>
            <a href="#"><img src="images/index/depart_02.png" alt=""></a>
            <a href="#"><img src="images/index/depart_03.png" alt=""></a>
            <a href="#"><img src="images/index/depart_04.png" alt=""></a>
            <a href="#"><img src="images/index/depart_05.png" alt=""></a>
            <a href="#"><img src="images/index/depart_06.jpg" alt=""></a>
        </div>
    </div>
</footer>
<!-- 平台协议遮罩层 -->
<div class="masks"></div>
<!--平台协议模态框-->
<div class="modals mic">
    <div class="modal-titles">
        <h3>平台服务协议</h3>
        <span id="fork">&times;</span>
    </div>
    <p>提示条款</p>
    <p>欢迎您与各平台经营者（详见定义条款）共同签署本《平台服务协议》（下称“本协议”）并使用平台服务！</p>
    <p>本协议为《平台服务协议》修订版本，自本协议发布之日起，平台各处所称“服务协议”均指本协议。</p>
    <p>一、 协议范围</p>
    <p>&emsp;&emsp;(一) <span>【平等主体】</span>本协议由您与平台经营者共同缔结，本协议对您与平台经营者均具有合同效力。</p>
    <p>&emsp;&emsp;(二) <span>【主体信息】</span>平台经营者指经营平台的各法律主体，您可查看平台各网站底部公示的证照信息以确定与您履约的主体。</p>
    <p>二、账户注册与使用</p>
    <p>&emsp;&emsp;(一) 您确认，在您开始注册程序使用平台服务前，您应当具备中华人民共和国法律规定的与您行为相适应的民事行为能力。若您不具备前述与您行为相适应的民事行为能力，则您及您的监护人应依照法律规定承担因此而导致的一切后果。</p>
    <p>&emsp;&emsp;(二) <span>【账户获得】</span>当您按照注册页面提示填写信息、阅读并同意本协议完成注册程序后，您可获得平台账户并成为平台用户。</p>
    <p>三、账户安全规范</p>
    <p>&emsp;&emsp;<span>【账户安全保管义务】</span>您的账户为您自行设置并由保管，任何时候均不会主动要求您提供账户密码。因此，您务必保管好您的账户，并确保您在每个上网时段结束时退出登录并以正确步骤离开平台。</p>
    <p>三、对违反上述承诺的用户，我们有权拒绝发布、删除评论、短期禁止发言直至永久关闭注册账号等管理措施。同时，对涉嫌违法犯罪的言论将保存在案、并向有关政府部门如实报告。</p>
    <span class="cloBtn" id="closeMask">关闭</span>
</div>

<!-- 提示遮罩层 -->
<div class="mask"></div>
<!-- 提示模态框 -->
<div class="modal">
    <div class="modal-title">
        <h4>温馨提示</h4>
        <span id="closeIcon">&times;</span>
    </div>
    <p id="tips"></p>
    <span class="closeBtn">关闭</span>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/register.js"></script>
<script type="text/javascript">
    /*
    表单验证
*/
$('#realName').on('blur',function () {
    let reg1 = /^[\u4e00-\u9fa5]*$/;
    let realNames = $(this).val();
    if(!reg1.test(realNames)) {
        $(this).addClass('addColor');
    }else {
        $(this).removeClass('addColor');
    }
});
// 用户名验证
$('#userName').on('blur',function () {
    let reg2 = /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,9}$/;
    let userNames = $(this).val();
    if(!reg2.test(userNames)){
        $(this).addClass('addColor');
    }else {
        $(this).removeClass('addColor');
    }
});
// 密码验证
$('#firPwd').on('blur',function () {
    let reg3 = /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,14}$/;
    let firPwds = $(this).val();
    if(!reg3.test(firPwds)) {
        $(this).addClass('addColor');
    }else {
        $(this).removeClass('addColor');
    }
});
// 确认密码验证
$('#surePwd').on('blur',function () {
    let newPwd = $(this).val();
    let oldPwd = $('#firPwd').val();
    if(newPwd !== oldPwd){
        $(this).addClass('addColor');
    }else {
        $(this).removeClass('addColor');
    }
});
// 邮箱验证
$('#email').on('blur',function () {
    let reg4 = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z0-9]{2,4}){1,3}$/;
    let emails = $(this).val();
    if(!reg4.test(emails)) {
        $(this).addClass('addColor');
    }else {
        $(this).removeClass('addColor');
    }
});
// 手机号码验证
$('#phoneNum').on('blur',function () {
    let reg4 = /^1[3456789]\d{9}$/;
    let phones = $(this).val();
    if(!reg4.test(phones)) {
        $(this).addClass('addColor');
    }else {
        $(this).removeClass('addColor');
    }
});
</script>
</body>
</html>